<template>
    <div class="container">
        <statistics-header header-title="医 学 核 酸 检 测 数 据 库"></statistics-header>
        <statistics-bar bar-type="nucleicAcidDetection"   ref="nucleicAcidDetection" @getType="getType"></statistics-bar>
        <div class="report-content">
            <div class="search-group">
                <div class="left-content">
                    <div class="data-title">数据库信息</div>
                    <dlq-search  @search="search"  search-type="1" :area-name="areaName"></dlq-search>
                </div>
                <!--<div class="record-num"><span style="color: red;">{{totalnum}}</span>条数据</div>-->
            </div>
            <Row class="main-table">
                <vxe-toolbar export custom></vxe-toolbar>
                <vxe-table
                        border
                        resizable
                        highlight-hover-row
                        height="700"
                        size="medium"
                        show-overflow="tooltip"
                        :loading="tableLoading"
                        align="center"
                        header-align="center"
                        :sort-config="{trigger: 'cell'}"
                        :data="tableData"
                        :checkbox-config="{checkField: 'checked'}">
                    <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
                    <vxe-table-column :field="item.key" :title="item.title" min-width="120"
                                      v-for="(item,index) in tableColumns" :key="index">
                    </vxe-table-column>
                    <!--                    <vxe-table-column field="place_type_name" title="场所类别" width="150"></vxe-table-column>-->
                </vxe-table>
            </Row>
            <br>
            <Row type="flex" justify="center">
                <Page show-sizer :current="pageObj.pageNo" :page-size="pageObj.pageSize" :total="pageObj.totalRecord"
                      @on-change="getPageNo" :page-size-opts="[10,20,50,200]" @on-page-size-change="pageSizeChange"/>
            </Row>
        </div>
    </div>
</template>
<script>
import {
  samplingList
} from '@/api/statistics-data-list'
import areaJSON from '@/libs/area'
import StatisticsHeader from '@/components/statistics-header'
import StatisticsBar from '@/components/statistics-bar'
import DlqSearch from '@/components/search'
export default {
  components: { StatisticsBar, StatisticsHeader, DlqSearch },
  data () {
    return {
      areaName: '',
      itemStyle: [
        'item-style1',
        'item-style2',
        'item-style3',
        'item-style4'
      ],
      totalnum: 0,
      typeNumObj: [
      ],
      searchObj: {},
      pageObj: {
        pageNo: 1,
        pageSize: 50,
        totalRecord: 0
      },
      tableLoading: false,
      tableColumns: [
        {
          title: '姓名',
          width: 100,
          tooltip: true,
          key: 'name',
          align: 'center'
        },
        {
          title: '性别',
          key: 'sex',
          tooltip: true,
          width: 100,
          align: 'center'
        },
        {
          title: '电话',
          key: 'tel',
          tooltip: true,
          width: 150,
          align: 'center',
          visible: false
        },
        {
          title: '年龄',
          key: 'age',
          tooltip: true,
          width: 100,
          align: 'center'
        },
        {
          title: '身份证号',
          key: 'Id_no',
          tooltip: true,
          width: 300,
          align: 'center'
        },
        // {
        //   title: '护照号',
        //   key: 'passport_no',
        //   tooltip: true,
        //   width: 300,
        //   align: 'center'
        // },
        // {
        //   title: '返回国',
        //   key: 'returned_country',
        //   tooltip: true,
        //   width: 200,
        //   align: 'center'
        // },
        // {
        //   title: '区域',
        //   key: 'country',
        //   tooltip: true,
        //   width: 200,
        //   align: 'center'
        // },
        {
          title: '样品来源',
          key: 'sample_sources',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '检测地点',
          key: 'place',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '检测日期',
          key: 'first_nucleic_date',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '检测结果',
          key: 'first_nucleic_results',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        // {
        //   // title: '二次核酸检测血清采样日期',
        //   title: '血清抗体采样日期',
        //   key: 'secondary_serum_sampling_date',
        //   tooltip: true,
        //   width: 200,
        //   align: 'center'
        // },
        // {
        //   title: '血清抗体检验结果',
        //   key: 'serum_test_results',
        //   tooltip: true,
        //   width: 200,
        //   align: 'center'
        // },
        // {
        //   // title: '三次核酸检测日期',
        //   title: '二次核酸检测日期',
        //   key: 'third_nucleic_date',
        //   tooltip: true,
        //   width: 200,
        //   align: 'center'
        // },
        // {
        //   // title: '三次核酸检测结果',
        //   title: '二次核酸检测结果',
        //   key: 'third_nucleic_results',
        //   tooltip: true,
        //   width: 200,
        //   align: 'center'
        // },
        {
          title: '批准备注',
          key: 'approved_remarks',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '收治处置',
          key: 'treatment',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '异常信息',
          key: 'exceptionInformation',
          tooltip: true,
          // width: 300,
          align: 'center'
        }
        // {
        //   title: '异常信息',
        //   key: 'abnormal_information',
        //   tooltip: true,
        //   width: 200,
        //   align: 'center'
        // },
        // {
        //   title: '批准备注',
        //   key: 'approved_remarks',
        //   tooltip: true,
        //   width: 200,
        //   align: 'center'
        // }
        // {
        //   title: '采样日期',
        //   key: 'sampling_date',
        //   tooltip: true,
        //   width: 200,
        //   align: 'center'
        // },
        // {
        //   title: '结果',
        //   key: 'result',
        //   tooltip: true,
        //   width: 200,
        //   align: 'center'
        // },
        // {
        //   title: '本市现住址所属区县',
        //   key: 'current_address_county',
        //   tooltip: true,
        //   width: 200,
        //   align: 'center'
        // },
        // {
        //   title: '日期',
        //   key: 'imp_date',
        //   tooltip: true,
        //   width: 200,
        //   align: 'center'
        // }
      ],
      tableData: [],
      areaList: areaJSON,
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      // 类别
      typeName: '',
      // 区域
      countyName: '',
      keyName: ''
    }
  },
  computed: {},
  mounted () {
    if (this.$route.query && this.$route.query.areaName) {
      this.areaName = this.$route.query.areaName
      this.$refs.nucleicAcidDetection.nucleicAcidDetectionAction(this.$route.query.areaName)
    } else if (this.$route.query && this.$route.query.type) {
      this.typeName = this.$route.query.type
      this.init()
    } else {
      this.init()
    }
  },
  methods: {
    search (value) {
      console.log(value, '888')
      this.pageObj.pageNo = 1
      this.$refs.nucleicAcidDetection.nucleicAcidDetectionAction(value.county)
      if (value.county === '全市') {
        this.countyName = ''
        this.init()
      } else {
        this.countyName = value.county
        this.keyName = value.key
        this.init(value)
      }
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    searchAction () {},
    init (data) {
      const obj = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        ...data
      }
      if (this.countyName) obj['county'] = this.countyName
      if (this.keyName) obj['key'] = this.keyName
      if (this.typeName) obj['type'] = this.typeName
      this.tableLoading = true
      samplingList(obj).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          this.pageObj.totalRecord = data.data.totalRecord
          this.totalnum = data.data.totalRecord
          for (let i = 0; i < data.data.results.length; i++) {
            data.data.results[i].samplingDate = data.data.results[i].sampling_date
          }
          this.tableData = data.data.results
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (e) {
      this.pageObj.pageSize = e
      this.init()
    },
    // 转换年月日方法
    getDate (str) {
      var oDate = new Date(str)
      var oYear = oDate.getFullYear()
      var oMonth = oDate.getMonth() + 1
      var oDay = oDate.getDate()
      // var oHour = oDate.getHours()
      // var oMin = oDate.getMinutes()
      // var oSec = oDate.getSeconds()
      var oTime = oYear + '-' + this.getzf(oMonth) + '-' + this.getzf(oDay)
      // + ' ' + this.getzf(oHour) + ':' + this.getzf(oMin) + ':' + this.getzf(oSec)// 最后拼接时间
      return oTime
    },
    // 补0操作
    getzf (num) {
      if (parseInt(num) < 10) {
        num = '0' + num
      }
      return num
    },
    // 获取类型
    getType (value) {
      if (value.type) this.typeName = value.type
      this.pageObj.pageNo = 1
      this.init()
    }
  }
}
</script>

<style scoped type="less">
    .container {
        margin-bottom: 50px;
    }
    .report-content {
        padding: 0 10px;
        height: auto;
    }
    .search-group {
        /*padding: 10px 0;*/
        border-bottom: 1px solid #efefef;
        /* position: relative; */
        /* z-index: -1; */
    }
    .sub-title {
        /*border-left: 7px solid darkred;*/
        font-size: 18px;
        font-weight: 700;
        padding-left: 10px;
        display: flex;
        justify-content: space-between;
    }
    .sub-title span {
        font-size: 30px;
        font-weight: 800;
        color: #fff;
        margin: 0 3px;
    }
    .precent-group {
        display: flex;
        align-items: center;
    }
    .precent-group>.item {
        width: 180px;
        padding: 0 10px;
    }
    .precent-group>.item>.text {
        width: 100%;
    }
    .demo-drawer-footer {
        margin-top: 20px;
    }
    .inner-frame>.ivu-row {
        margin-bottom: 10px;
    }

    .ivu-form-item{
        margin-bottom: 10px;
    }
    .main-table {
        margin-top: -45px;
    }
    .data-title {
        border-left: 6px solid darkred;
        padding-left: 7px;
        margin-right: 20px;
        font-size: 16px;
        display: flex;
        align-items: center;
    }
    .search-group {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
    }
    .left-content {
        display: flex;
        align-items: center;
        z-index: 2;
    }
    .record-num {
        margin-right: 140px;
    }
</style>
